<!--
 * @Description: 设置弹窗内的规格表格
 * @Date: 2023-04-08 15:17:15
 * @LastEditTime: 2023-04-10 19:06:31
 * @Author: Black
 * @FilePath: \store_admin\src\views\goods\components\SkuTable.vue
-->
<template>
  <el-form-item label="规格设置" size="normal">
    <table class="border w-full">
      <thead>
        <tr>
          <th class="border" :width="th.width" v-for="(th, t_index) in tableThs" :key="t_index" :rowspan="th.rowspan"
            :colspan="th.colspan">
            {{ th.name }}
          </th>
        </tr>
        <tr>
          <th class="border" v-for="(th, t_index) in skuLabels" :key="t_index" :rowspan="th.rowspan"
            :colspan="th.colspan">
            {{ th.name }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in sku_list" :key="index">
          <td class="border text-center" v-for="(sku, s_index) in item.skus" :key="s_index">{{ sku.value }}</td>
          <td class="border text-center">
            <el-input v-model="item.pprice" size="small" type="number"></el-input>
          </td>
          <td class="border">
            <el-input v-model="item.oprice" size="small" type="number"></el-input>
          </td>
          <td class="border">
            <el-input v-model="item.cprice" size="small" type="number"></el-input>
          </td>
          <td class="border">
            <el-input v-model="item.stock" size="small" type="number"></el-input>
          </td>
          <td class="border">
            <el-input v-model="item.volume" size="small" type="number"></el-input>
          </td>
          <td class="border">
            <el-input v-model="item.weight" size="small" type="number"></el-input>
          </td>
          <td class="border">
            <el-input v-model="item.code" size="small"></el-input>
          </td>
        </tr>
      </tbody>
    </table>
  </el-form-item>
</template>

<script setup>
import { initSkuTable } from '~/composables/useSku.js'

const {
  skuLabels,
  tableThs,
  sku_list
} = initSkuTable()

</script>